<template>
  <div class="home-search-bar">
    <div class="frame">
      <div class="left">
        <div class="start date-cell">
          <div class="checkin text">住</div>
          <div class="date">{{ checkinDate }}</div>
        </div>
        <div class="end date-cell">
          <div class="checkout text">离</div>
          <div class="date">{{ checkoutDate }}</div>
        </div>
      </div>
      <div class="right">
        <div class="keyword">关键字/位置/民宿</div>
        <div class="icon">
          <van-icon name="search" color="#787879" size="25" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getMMDDdot } from "@/utils/formatDate"
import useMainStore from "@/store/modules/main"
import { storeToRefs } from "pinia";
import { computed } from "vue";
const mainStore = useMainStore()
const { checkinDate: storeCheckinDate, checkoutDate: storeCheckoutDate } = storeToRefs(mainStore)


const checkinDate = computed(() => getMMDDdot(storeCheckinDate.value))
const checkoutDate = computed(() => getMMDDdot(storeCheckoutDate.value))



</script>

<style lang="less" scoped>
.home-search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;

  height: 45px;
  background-color: #fff;

  padding: 4.26667vw 4.26667vw 2.66667vw;

  .frame {
    display: flex;
    align-items: center;

    padding: 0 2.66667vw;

    background-color: #f2f4f6;
    border-radius: 1.6vw;

    height: 100%;

    .left {
      border-right: 2px solid #fff;
      padding-right: 8px;

      height: 100%;

      justify-content: center;
      display: flex;
      flex-direction: column;


      .date-cell {
        display: flex;
        font-size: 2.66667vw;

        .text {
          color: #999;
          margin-right: 3px;
        }
      }

      .end {
        margin-top: 3px;
        position: relative;

        .date::after {
          content: " ";
          width: 0;
          height: 0;
          border: 4px solid #666;
          border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #666;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          position: absolute;
          bottom: 0px;
          right: -12px;
        }
      }

    }

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .keyword {
        padding: 0 1.6vw;
        color: #999;
        font-size: 3.2vw;
      }
    }


  }

}
</style>